<script lang="ts" setup>
import { ref, computed } from 'vue'
const airLineList = [
  '航线1',
  '航线2',
  '航线3',
  '航线4',
  '航线5',
  '航线6',
  '航线7',
  '航线8',
  '航线9',
  '航线10'
]
// 定义要发送的事件类型
const emit = defineEmits<{
  (e: 'update:value', value: string | null): void
}>()
const radio = ref(-1)
// 使用计算属性来获取当前选中的航线
const selectedAirLine = computed(() => {
  return radio.value >= 0 && radio.value < airLineList.length ? airLineList[radio.value] : null
})
const radioChange = () => {
  emit('update:value', selectedAirLine.value)
}
defineExpose({ selectedAirLine })
</script>
<template>
  <div class="task-dispatch-model">
    <p class="mb-[8px] task-title">请选择航线：</p>
    <div style="height: 90%; overflow-y: scroll">
      <el-radio-group v-model="radio" class="radio-group">
        <el-radio
          :value="index"
          v-for="(item, index) in airLineList"
          @change="radioChange"
          :key="index"
        >
          {{ item }}
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<style lang="less" scoped>

.el-radio__label {
  font-size: 16px !important;
}
.radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.radio-group .el-radio {
  margin-bottom: 10px; /* 可以根据需要调整间距 */
}
.task-dispatch-model {
  width: 317px;
  height: 219px;
  background: rgba(9, 36, 74, 0.9);
  border-radius: 2px;
  border: 1px solid #205487;
  padding: 16px 13px;
  font-family: Source Han Sans CN;

  .task-title {
    font-weight: 500;
    font-size: 16px;
  }
  .task-inner-box {
    display: flex;
  }
}
</style>
